﻿
@model IEnumerable<GUI.Models.ArticleModel>

@{
    ViewBag.Title = "Index";

}

@*  <link rel="stylesheet"
        href="../../Content/jquery-ui/redmond/jquery-ui-1.8.14.custom.css"
            type="text/css" />
    <link rel="stylesheet"
        href="../../Content/jquery-grid/ui.jqgrid.css" type="text/css" />

       <script src="../../Scripts/jquery-1.6.2.min.js"
        type="text/javascript"></script>
    <script src="../../Scripts/jquery-grid/grid.locale-en.js"
        type="text/javascript"></script>
    <script src="../../Scripts/jquery-grid/jquery.jqGrid.min.js"
        type="text/javascript"></script>*@







@*<style>

    </style>

<script type="text/javascript">
    var lastsel = 0
    var seletid=0
    // the url to 
    var jqDataUrl = "/Articles/LoadjqData";
    $(document).ready(function () {

        // Set up the jquery grid
        $("#jqTable").jqGrid({
            // Ajax related configurations
            url: jqDataUrl,
            datatype: "json",
            mtype: "POST",
            
            // Specify the column names
            colNames: ["Id", "Title ", "CreationDate", "ArticleContenent"],

            // Configure the columns
            colModel: [
            {
                name: 'Id', index: 'Id', width: 40, align: 'left',
                editable: false, editrules: { edithidden: true }, hidden: true
            },
            {
                name: 'Title', index: 'Title', width: 40, align: 'left', edittype: 'text',
                editable: true
            },
            {
                name: 'CreationDate', index: 'CreationDate', width: 100, align: 'center',
                editable: true, formatter: 'date', sorttype: "date"
            },

    
  { name: 'Article', edittype: 'select', formatter: 'showlink', formatoptions: { baseLinkUrl: '@Url.Action("DetailArticle")' }, width: 50, align: 'center' }],
        //{ name: 'ArticleContenent', index: 'ArticleContenent', width: 50, align: 'center', editable: true, edittype: 'textarea', editoptions: { size: 70, maxlength: 30 } }],
           
            onSelectRow: function (id) {
                if (id && id !== lastsel) {
                    jQuery('#jqTable').restoreRow(lastsel);
                    jQuery('#jqTable').editRow(id, true);
                    lastsel = id;
                }
            },

           
          

            // Grid total width and height
            width: 1000,
            height: 300,

            // Paging
            toppager: true,
            pager: $("#jqTablePager"),
            rowNum: 5,
            rowList: [5, 10, 20, 50],
            viewrecords: true, // Specify if "total number of records" is displayed

            // Default sorting
            sortname: "Id",
            sortorder: "asc",
           
            viewrecords: true,
            //editurl: '/Articles/GridSave',
          
           
            // Grid caption
            caption: " DashBoard",
        }).navGrid("#jqTablePager",
            { refresh: true, add: false, edit: true, del: true },
                {
     
                    mytype: "post",
                    reloadAfterSubmit: true,

                    resize: true,
                    onclickSubmit: function (rp_ge, postdata) {
                       
                        rp_ge.url = '/Articles/EditArt_icle/' + postdata;
                    },
                    serializeDelData: function (postdata) {
                        debugger;
                        return JSON.stringify({ Id: postdata.id, Title: postdata.Title, CreationDate: postdata.CreationDate, ArticleContenent: postdata.ArticleContenent });
                    },
                   

                }, // settings for edit
                {}, // settinsg for add
                {
                  
                    mytype: "post",
                    reloadAfterSubmit: true,
                  
                    resize: false,
                    onclickSubmit: function (rp_ge, postdata) {
                        rp_ge.url = '/Articles/Delete/' + postdata;
                    },
                    serializeDelData: function (postdata) {
                        return JSON.stringify({ Id: postdata.id });
                    }, 

                }, // settings for delete
                {
                    sopt: ["cn"], closeOnEscape: true, closeAfterSearch: true 
                } // Search options. Some options can be set on column level
         );
    });
</script>



<div>
        <table id="jqTable" class="scroll"></table>
        <div id="jqTablePager" />   
</div>
*@

@{
    var jTableStyle = "metro/blue/jtable.css";
    if (!string.IsNullOrEmpty(Request["jTableStyle"]))
    {
        jTableStyle = Request["jTableStyle"];
    }
}



<div id="tele">

</div>


    <link href="@Url.Content("~/Content/Jtable/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Jtable/themes/metroblue/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Jtable/highlight.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/jtable/themes/" + jTableStyle)" rel="stylesheet" type="text/css" />

    

    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shCore.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shThemeDefault.css")" rel="stylesheet" type="text/css" />
     <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/syntaxhighligher/shCore.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushJScript.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushXml.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushCSharp.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushSql.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jtablesite.js")" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jtable/jquery.jtable.js")"></script>
    

     

    <style>
        .child-opener-image
        {
            cursor: pointer;
        }
        .child-opener-image-column
        {
            text-align: center;
        }
        .jtable-dialog-form
        {
            min-width: 220px;
        }
        .jtable-dialog-form input[type="text"]
        {
            min-width: 200px;
        }


        div.filtering
        {
            border: 1px solid #999;
            margin-bottom: 5px;
            padding: 10px;
            background-color: #EEE;
        }


    </style>



@section OpenCreateArticle{
    

<a href='@Url.Action("Create", new { set02568auId = @ViewBag.session })'>
    Ajouter un article
</a>

    
}







       <script type="text/javascript">
     function getAuthor(){

            
               $.ajax({

                   url: "/Articles/GetAuthor",
                   datatype: 'json',
                   type: "GET",
                   cache: true,
                   data: { Id: document.getElementById("idah").value},
           
                   success: function (data) {
              

       

                       for(var i=0;i<=data.length;i++){
                         
                           var name= data[i].Name;
                        var lastname=data[i].Lastname;
                           var profile=data[i].Profil;

                           var output =name+" "+lastname+"</br>"+profile;
                           $("#authsection").html(output).css("text-shadow","2px 2px 2px black, -2px -2px 2px white");
                       }
              
               
                   },
                   error: function (response) {
                       response.Status;
                   }
               });
           }

        
      
      </script>
      <div id="authsection">
        
         </div>
            
       
    <input type="hidden" id="idah" value="@ViewBag.idauth " />


      
            
      


<script type="text/javascript">

    $(document).ready(function () {
        
        
        var author=@Html.Raw(Json.Encode(ViewBag.author));
        
        $("#name").html(author.Name)
        $("#lastname").html(author.Lastname)
        $("#Profil").html(author.Profil)
      
    });

    $(function () {
        // $("#datenamecheckresearch").datepicker();

        var date = $('#datenamecheckresearch').datepicker({ dateFormat: 'dd-mm-yy' }).val();
    });

   

</script>

  





<div class="filtering">
    <form>
        <label>Date:</label> <input type="text" name="date" id="datenamecheckresearch" />
       
        <button type="submit" id="LoadRecordsButton">Load records</button>
    </form>
</div>

<body onload="getAuthor()">


<div id="StudentTableContainer">
</div>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#StudentTableContainer').jtable({
                title: 'Articles',
                paging: true, //Enable paging
                sorting: true, //Enable sorting
                pageSize: 10,
                defaultSorting: 'Litle ASC',

                actions: {
                    listAction: '@Url.Action("ArticleListByFiter")',
                    deleteAction:'@Url.Action("DeleteArticle")'
                
                },
          fields: {
   
                    Id: {
                     
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                       
                      },


                    Themes:{

                        title: '',
                        width: '5%',
                        sorting: false,
                        edit: false,
                        create: false,
                        display: function (Data) {
                            //Create an image that will be used to open child table
                            var $img = $('<img src="/Content/images/subjects.png" title="Edit Themes" />');
                            //Open child table when user clicks the image
                            $img.click(function () {
                                $('#StudentTableContainer').jtable('openChildTable',
                                        $img.closest('tr'),
                                        {
                                            title: Data.record.Title + ' - Article Title  ',
                                            actions: {
                                                listAction: '/Articles/GetThemeList?Id=' +Data.record.Id,
                                                deleteAction: '/Articles/DeleteThemes',
                                                updateAction: '/Articles/Updatethemes'
                                                //createAction: '/Demo/CreatePhone'
                                            },
                                            
                                            fields: {
                                                Id: {
                                                    key: true,
                                                    create: false,
                                                    edit: false,
                                                    list: false
                                                },

                                                Subjects: {
                                                    title: 'Subjects',
                                                    width: '30%'
                                                   
                                                },
                                               
                                                ArticleId: {
                                                    type: 'hidden',
                                                    defaultValue: Data.record.ArticleId
                                                },
                                               
                                               
                                            }
                                        }, function (data) { //opened handler
                                            data.childTable.jtable('load');
                                        });
                            });
                            //Return image to show on the person row
                            return $img;
                        }
                    },

                    
                    

                    Title:{

                        title: 'Title',
                        sorting: true,
                        width: '15%'
                       
                    },
                   

                    CreationDate:{

                        title: 'Creation Date',
                        width: '10%',
                        type: 'date',
                        sorting:true,
                        displayFormat: 'yy-mm-dd'
                    },

                  

                    ArticleContenent:{

                        title: 'Article',
                        width: '70%',
                        display: function (data) {
                            if (data.record) {
                                return ' <a href="/Articles/Details/'+data.record.EncodeId + '">'+data.record.ArticleContenent+ '</a>';
                            }
                        }
                    }
                   
                 
        }
       

        });
            $('#LoadRecordsButton').click(function (e) {
                e.preventDefault();
            $('#StudentTableContainer').jtable('load',{
               
                date: $('#datenamecheckresearch').val()
            });
                

            //Load all records when page is first s    $('#LoadRecordsButton').click();
        });
            $('#LoadRecordsButton').click();
        });
       
 </script>


@*
 <script type="text/javascript">

 $('#userTableContainer').jtable({
  
            recordsLoaded: function(event, data) {
                $('.jtable-data-row').click(function() {
                    var row_id = $(this).attr('data-record-key');
                    alert('clicked row with id '+row_id);
                });
            }
        });
 </script>

<div id="content">
    <h1>Users</h1>      

    <br />
    <div id="userTableContainer">

    </div>
</div>*@
    </body>